<div id="root">
  <div class="header">
    <div>
      <input
        type="number"
        step="10"
        min="10"
        max="50000"
        data-bind="value:state.memberCount"
      />
      <input
        type="button"
        class="btn btn-default"
        style="margin-left:10px"
        data-bind="click:handleChangeMemberCount"
        value="更改人数"
      />
      <input
        type="button"
        class="btn btn-default"
        style="margin-left: 10px"
        data-bind="click:handleThrowCoin"
        value="投掷硬币"
      />
      <span
        style="margin-left: 10px"
        data-bind="text:'剩余玩家人数：'+state.members().length"
      ></span>
      <span style="margin-left: 10px">
        你想当的玩家编号：
        <input
          type="number"
          min="1"
          data-bind="value:state.youWish,
                  attr:{max:state.members().length}"
        />
      </span>
    </div>
    <div style="color:red">投掷硬币为正面的玩家进入下一轮</div>
  </div>
  <div class="list" style="height:500px;position: relative;" data-bind="foreach: { data: state.members, as: 'member' }">
    <div class="member" data-bind="attr:{key:member.id}">
      <div class="member-icon">
        <img data-bind="attr:{src:member.iconUrl}" />
      </div>
      <div class="member-name" data-bind="text:'名称：'+member.name()"></div>
      <div class="member-win-count-text">正面次数：</div>
      <div
        class="member-win-count"
        data-bind="text:member.winCount()+' 次'"
      ></div>
    </div>
  </div>
</div>
